<script setup>
import { SINGLE_ANS_MAP } from '@/constant'
const props = defineProps({
    idx: {
        type: Number,
        default: 0
    },
    paperQuestion: {
        type: Object,
        default: () => ({
            question: {
                type: '', // 题型
                title: '',
                levle: ''
            },
            no: '',
            myAns: ''
        })
    },
    // 显示模式
    mode: {
        type: String,
        validators: (value) => ['view', 'exam', 'ansview'].includes(value),
        // view 普通查看-点击选择项之后，就立刻会有答案的显示。默认使用这个模式
        // exam 考试模式
        // ansview 答案查看，考试提交后查看考试成绩时的对比-理解为试卷解析模式
        default: "view"
    }
})
const options = ["optionA", "optionB", "optionC", "optionD", "optionE"]
const question = computed(() => {
    return props.paperQuestion.question
})
</script>
<template>
    <div class="box mb-4 hover:bg-gray-100 p-4" :id="'subject' + question.id">
        <div class="mb-4">
            <span>第 <label class="text-red-500  font-bold">{{ idx }}</label> 题</span> <span>{{ question.type == 'single'
                ? '单选题' :
                question.type == 'judge' ? '判断题' :
                    question.type == 'code' ? '编程题' : '未知类型' }}</span>
            <span>{{ paperQuestion.no }}</span> <span>{{ question.level }}</span>
            <!-- <div v-html="question.title"></div> -->
        </div>
        <!-- {{ question }} -->

        <div v-if="question.type === 'single'">
            <div class="mb-4" v-html="question.contentSelect?.body"></div>

            <div v-for="i in question.contentSelect.optionLen" :key="i" class="p-2 my-2 flex items-center">
                <div class="w-6">{{ options[i - 1].replace("option", "") }}.</div>
                <div v-html="question.contentSelect[options[i - 1]]"></div>
            </div>
            <div v-if="mode === 'exam'">
                <app-ans-box-single :idx="paperQuestion.no" v-model="paperQuestion.myAns"></app-ans-box-single>
            </div>
            <div v-if="mode == 'ansview'">
                <p>
                    <label>
                        正确答案：{{ SINGLE_ANS_MAP[question.contentSelect.answer] }}
                    </label>
                    <label>

                        我的答案：{{ SINGLE_ANS_MAP[paperQuestion.myAns] }}
                    </label>
                </p>

            </div>
            <div v-if="mode == 'view'">
                <!-- <app-ans-box-single :idx="paperQuestion.no" v-model="paperQuestion.myAns"></app-ans-box-single> -->

                <p>
                    <label>
                        正确答案：{{ SINGLE_ANS_MAP[question.contentSelect.answer] }}
                    </label>
                    <!-- <label>
                        我的答案：{{ SINGLE_ANS_MAP[paperQuestion.myAns] }}
                    </label> -->
                </p>

            </div>
        </div>

        <div v-else-if="question.type === 'judge'">
            <div v-html="question.contentJudge?.body"></div>
            <div v-if="mode === 'exam'">
                <app-ans-box-judge :idx="paperQuestion.no" v-model="paperQuestion.myAns"></app-ans-box-judge>
            </div>
        </div>

        <div v-else-if="question.type === 'code'">
            <div v-html="question.contentCode?.body"></div>
        </div>
    </div>

</template>